<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器镜像监控面板</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }

        .card {
            margin-bottom: 1.5rem;
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .chart-container {
            width: 100%;
            height: 300px;
        }

        .tag-entry {
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
        }

        .tag-entry:last-child {
            border-bottom: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 资产信息 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                资产信息
            </div>
            <div class="card-body">
                <ul id="asset-list" class="list-unstyled mb-0">
                </ul>
            </div>
        </div>

        <!-- 告警监控 -->
        <div class="card mb-4">
            <div class="card-header bg-warning text-white">
                告警与安全状态
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <canvas id="vuln-pie"></canvas>
                    </div>
                    <div class="col-md-4">
                        <canvas id="security-bar"></canvas>
                    </div>
                    <div class="col-md-4">
                        <div class="sticky-top mt-4">
                            <h5 class="mb-3">其他扫描状态</h5>
                            <ul id="other-scans" class="list-unstyled">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计数据 -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                统计数据
            </div>
            <div class="card-body">
                <canvas id="stat-bar"></canvas>
            </div>
        </div>

        <!-- 标签信息 -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                标签信息
            </div>
            <div class="card-body">
                <div id="tag-container" class="d-flex flex-column gap-3">

                </div>
            </div>
        </div>

        <!-- 定时任务 -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                定时任务
            </div>
            <div class="card-body">
                <ul id="schedule-list" class="list-unstyled">
                </ul>
            </div>
        </div>
    </div>

    <script>
        const rawData = {!!json_encode($data)!!};

        document.addEventListener('DOMContentLoaded', function () {
            // 资产信息
            renderAssetList(rawData[0].data);

            // 安全告警
            const alertData = rawData[1].data;
            renderVulnChart(alertData['漏洞扫描状态']);
            renderSecurityChart(alertData['安全等级（securitylevel）']);
            renderOtherScans(alertData['其他扫描状态']);

            // 统计数据
            renderStatChart(rawData[2].data);

            // 标签信息
            renderTagInfo(rawData[3].data);

            // 定时任务
            renderScheduleTasks(rawData[4].data);
        });

        function renderAssetList(data) {
            const listContainer = document.getElementById('asset-list');
            data.forEach(item => {
                const li = document.createElement('li');
                li.className = 'badge rounded-pill bg-dark text-bg-secondary me-2 mb-2';
                li.textContent = item;
                listContainer.appendChild(li);
            });
        }

        function renderVulnChart(data) {
            const ctx = document.getElementById('vuln-pie').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        data: Object.values(data),
                        backgroundColor: ['#dc3545', '#0d6efd'],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    plugins: {
                        legend: { position: 'bottom' }
                    },
                    animation: { duration: 0 },
                    responsive: true
                }
            });
        }

        function renderSecurityChart(data) {
            const ctx = document.getElementById('security-bar').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        data: Object.values(data),
                        backgroundColor: ['#198754'],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    scales: {
                        y: { ticks: { stepSize: 1 } },
                        x: {}
                    },
                    responsive: true,
                    plugins: { legend: { display: false } }
                }
            });
        }

        function renderOtherScans(scans) {
            const list = document.getElementById('other-scans');
            Object.keys(scans).forEach(scanName => {
                const li = document.createElement('li');
                li.innerHTML = `
                    <strong>${scanName}</strong>：${scans[scanName]}<br>
                `;
                list.appendChild(li);
            });
        }

        function renderStatChart(data) {
            const ctx = document.getElementById('stat-bar').getContext('2d');
            const labels = data.map(item => item.name);
            const values = data.map(item => item.value);
            new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: ['#0dcaf0', '#28a745'],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    legend: { display: false },
                    responsive: true
                }
            });
        }

        function renderTagInfo(data) {
            const tagContainer = document.getElementById('tag-container');
            data.forEach(entry => {
                const tag = document.createElement('div');
                tag.className = 'card shadow-sm pb-2';
                const imageLabel = document.createElement('div');
                imageLabel.className = 'card-header bg-body-secondary';
                imageLabel.textContent = entry.image;

                const content = document.createElement('div');
                content.className = 'card-body p-3';

                try {
                    const decoded = atob(entry.content);
                    const parsed = JSON.parse(decoded);
                    content.innerHTML = JSON.stringify(parsed, null, 2);
                } catch (e) {
                    content.textContent = entry.content;
                }

                tag.appendChild(imageLabel);
                tag.appendChild(content);

                tagContainer.appendChild(tag);
            });
        }

        function renderScheduleTasks(data) {
            const list = document.getElementById('schedule-list');
            data.forEach(task => {
                const item = document.createElement('li');
                item.className = 'list-group-item';
                item.textContent = task;
                list.appendChild(item);
            });
        }
    </script>
</body>

</html>